/**
 * 数组变更的检测
 *
 *
 */

// var vm = {
//   data: {
//     a: 1,
//     b: 2,
//     list: [1, 2, 3, 4, 5]
//   }
// }

// for (var key in vm.data) {
//   (function (keyName) {
//     Object.defineProperty(vm, key, {
//       get() {
//         console.log('数据获取')
//         return vm.data[keyName]
//       },
//       set(newValue) {
//         console.log('数据设置')
//         vm.data[keyName] = newValue
//       }
//     })
//   }(key))
// }

// console.log(vm.a)

// vm.b = 3
// console.log(vm.b)

// vm.list = [2, 3, 4, 5, 6]
// console.log(vm.list)

// 没法监听到 set
/**
 * 当数据变化了
 * 视图能否变化 -> 取决于
 *
 * 不返回新数组
 * Object.defineProperty -> 没办法监听下列方法对数组的操作变更
 */
// vm.list.push(12)
// vm.list.pop()
// vm.list.shift()
// vm.list.splice(2, 1)
// vm.list.sort((a, b) => b - a)
// vm.list.reverse()

// Vue 对以上方法进行了包裹封装
// function push() {
//   vm.list.push(12)
//   // 手动试图更新
// }

// console.log(vm.list)

// import { createApp } from 'vue/dist/vue.esm-bundler'

// const App = {
//   template: `<div></div>`,
//   data() {
//     return {
//       list: [1, 2, 3]
//     }
//   }
// }

// const app = Vue.createApp(App)
// const vm = app.mount('#app')

const vm = new Vue({
  el: '#app',
  template: `<div></div>`,
  data() {
    return {
      list: [1, 2, 3]
    }
  }
})
console.log(vm)

// var ArrayPrototype = Array.prototype
// var ARR_METHODS = [
//   'pop',
//   'push',
//   'shift',
//   'reverse',
//   'splice',
//   'unshift',
//   'sort'
// ]

// ARR_METHODS.forEach(methods => {
//   methods = function (...arg) {
//     ArrayPrototype[methods].call(this, arg)
//     // 试图更新
//   }
// })

// 有些数组方法会返回新数组用于替换原数组

// const App = {
//   data() {
//     return {
//       list: [1, 2, 3, 4, 5]
//     }
//   },
//   template: `
//     <div>
//       <span v-for="n of list" :key="n">{{ n }}</span>
//       <div>
//         <button @click="operateNumber">Opera Number</button>
//       </div>
//     </div>
//   `,
//   methods: {
//     operateNumber() {
//       this.list.push(this.list[this.list.length - 1] + 1)

//       // 替换数组是否会重新渲染整个DOM列表（性能担忧）
//       // 不一定，Vue在对DOM操作的时候进行了大量的新旧节点信息的对比算法
//       // Vue会将DOM重新渲染的程度最小化，做到已有的DOM节点最大化复用
//     }
//   }
// }

// Vue.createApp(App).mount('#app')